<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08 Element获取元素位置</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/highlight.default.min.css">

    <script src="../static/js/marked.min.js"></script>
    <script src="../static/js/highlight.min.js"></script>
</head>

<body>
    <div id="content"></div>
    <script>
        const renderer = new marked.Renderer();
        fetch('./08 Element获取元素位置.md')
            .then(response => response.text())
            .then(markdown => {
                const html = marked.parse(markdown, { renderer });
                document.getElementById('content').innerHTML = html;
                document.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightBlock(block);
                });
            });
    </script>

    <hr>

    <div class="example">
        <p><strong>示例元素区域</strong></p>

        <span id="myDiv1">示例元素1</span><span style="font-family: Kaiti;">（观察元素的 class 属性值）</span>
        <br>
        <span class="myDiv2">示例元素2</span><span style="font-family: Kaiti;">（原本值：示例元素2）</span>
        <br>
        <span class="myDiv2">示例元素2</span><span style="font-family: Kaiti;">（原本值：示例元素2）</span>
    </div>

    <div class="explain">
        <p><code>document.getElementsByClassName</code> 返回的是一个
            <code>HTMLCollection</code>，这是一个<strong>类数组对象</strong>（这是一个类似数组的对象，但并不是一个真正的数组），它包含所有匹配的元素。
        </p>
        <p>对于类数组对象，不能直接对它们使用 <code>.innerHTML</code> 或 <code>.classList</code> 这样的属性，因为这些属性是针对<strong>单个元素</strong>的。
        </p>
        <p>你需要通过索引（或索引等方式）来访问特定的元素，然后使用 <code>.innerHTML</code> 或 <code>.classList</code>方法。</p>
    </div>

    <script>
        window.onload = function () {  // 使用 window.onload 事件来确保代码在页面完全加载后执行。
            /*
            若只关心 DOM 的加载完成，而不需要等待样式表、图片和子框架完成加载，
            可以使用 DOMContentLoaded 事件
            document.addEventListener('DOMContentLoaded', function() {
                // 这段代码会在 DOM 加载完成后执行
            });
            */
            console.clear();  // 清空控制台输出

            console.log("scrollHeight 返回对应DOM的总高度，包括视口不可见的部分");
            console.log("clientHeight 返回对应DOM的高度，在某些情况下可能包括视口不可见的部分");

            console.log("document.documentElement.clientHeight:\t", document.documentElement.clientHeight);
            console.log("document.documentElement.scrollHeight:\t", document.documentElement.scrollHeight);
            console.log("document.body.clientHeight:\t", document.body.clientHeight);
            console.log("document.body.scrollHeight:\t", document.body.scrollHeight);
            console.log("document.documentElement.scrollLeft:\t", document.documentElement.scrollLeft);
            console.log("document.documentElement.scrollTop:\t", document.documentElement.scrollTop);
        }
    </script>
</body>

</html>